<template>
	<view :style="{'--price':vuex_config.price}">
		<view class="list">
			<view class="list-item" v-for="(item, index) in dataList" :key="index" @click="open(item.pk_id)">
				<image class="list-item-img" :src="item.img"></image>
				<view class="detail">
					<view class="detail-title">{{ item.name }}</view>
					<view class="bot">
						<view class="detail-price">
							{{ item.integral > 0 ? item.integral + '积分' : '' }}
							<template v-if="item.price > 0">
								<text v-if="item.integral > 0">+</text>
								<text class="text_sign">￥</text>
								{{ item.price }}
							</template>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		pagingMixin
	} from '@/mixins/pagingMixin.js';
	import {
		uniLinkTo
	} from '@/utils/uniPromise.js';
	export default {
		mixins: [pagingMixin],
		data() {
			return {};
		},
		methods: {
			initPage(params) {
				this._init_data('GetMallProductList', {
					...params
				});
			},
			loadMore() {
				this._load_data();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.list {
		padding: 10rpx 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.list-item {
			width: 48%;
			border-radius: 13rpx;
			overflow: hidden;
			background-color: #fff;
			margin-bottom: 20rpx;
			box-shadow: 5rpx 5rpx 12rpx 5rpx #eaeaea;

			.list-item-img {
				width: 100%;
				height: 300rpx;
			}

			.detail {
				padding: 20rpx;

				.detail-title {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 100%;
				}

				.bot {
					display: flex;
					align-items: center;

					.detail-price {
						margin-top: 10rpx;
						color: var(--price);
						margin-right: 10rpx;

						.text_sign {
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}
</style>
